<script setup lang="ts">
import { Bullet } from '@antv/g2plot';

import { onMounted, useTemplateRef, defineProps, watch } from 'vue';

const props = defineProps(['data'])

const cont = useTemplateRef('container')
const chart = null

onMounted(() => {
  const data = [
    {
      title: '风险等级',
      ranges: [40, 70, 100],
      measures: [89, 99],
      target: 60,
    },
  ];

  const chart = new Bullet(cont.value, {
    data,
    layout: 'vertical',
    measureField: 'measures',
    rangeField: 'ranges',
    targetField: 'target',
    xField: 'title',
    color: {
      range: ['#FF0000', '#e98658', '#00ff00'],
      measure: '#5B8FF9',
      target: '#39a3f4',
    },
    xAxis: {
      line: null,
    },
    yAxis: false,
    label: {
      target: true,
    },
    // 自定义 legend
    legend: {
      custom: true,
      position: 'bottom',
      items: [
        {
          value: '差',
          name: '差',
          marker: { symbol: 'square', style: { fill: '#FF0000', r: 5 } },
        },
        {
          value: '优',
          name: '优',
          marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
        },
        {
          value: '实际值',
          name: '实际值',
          marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
        },
        {
          value: '目标值',
          name: '目标值',
          marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
        },
      ],
    },
  });

  chart.render();
})
// watch(() => props.data, () => { console.log(props.data); chart.changeData(props.data) })

</script>

<template>
  <div ref="container" style=""></div>
</template>
<style scoped>
* {
  color: white;
}

x {
  background-color: #e98658;
}
</style>
